<template>
	    <el-dialog
				:visible="guideObj.isShow"
				@close="close"
				:append-to-body="true"
				:close-on-press-escape="true"
				top="8Vh"
				width="960px" >
				<div style="text-align: center; margin-bottom: 20px" 	class="novice-guide">
					<el-tag
					v-for="(item, index) in guildeArr"
					:key="index"
					class="tag"
					:class="{'tag-common': index !== guideObj.currentIndex}"
					@click="changeTab(index)"
					effect="dark">
					{{ item.name }}
				</el-tag>
				<transition name="m7fade">
					<div>
						<el-image
						v-for="(item, index) in guildeArr"
						:key="index"
						v-show="index === guideObj.currentIndex"
						:src="`/img/noviceGuide/${guildeArr[index].value}_${$i18n.locale}.png`"
						class="img-wrap"
						fit="contain">
						</el-image>
					</div>
				</transition>
					<el-button @click="turnPage('pre')" class='primary_btn' v-if="guideObj.currentIndex !==0">{{$t('userInfo.previous')}}</el-button>
					<el-button @click="turnPage('next')" type="primary" class='primary_btn' v-if="guideObj.currentIndex !==6">{{$t('userInfo.next')}}</el-button>
					<el-button @click="close" class='primary_btn' type="primary" v-if="guideObj.currentIndex ===6">{{$t('public.Iknow')}}</el-button>
				</div>
    </el-dialog>
</template>
<script>
  export default {
    name: 'Main',
    data () {
      return {
        guideObj: {
          isShow: false,
          currentIndex: 0
        },
        guildeArr1: [
          {name: this.$t('public.callCenter'), value: 'call'},
          {name: this.$t('public.webchat'), value: 'webchat', isShow: true},
          {name: this.$t('public.mail'), value: 'email'},
          {name: this.$t('public.customer'), value: 'customer', isShow: true},
          {name: this.$t('public.business'), value: 'business'},
          {name: this.$t('public.qualityCheck'), value: 'quality'},
          {name: this.$t('softPhoneBar.salesSupport'), value: 'support'}
				]
			}
    },
    computed: {
			guildeArr () {
				let isEcommerce = this.$store.getters.isEcommerce
				return this.guildeArr1.filter((item) => {
					if (!isEcommerce) {
						return true
					} else {
						return item.isShow
					}
				})
			}
    },
    methods: {
      turnPage (type) {
        if (type === 'pre') {
          this.guideObj.currentIndex--
        } else {
          this.guideObj.currentIndex++
				}
      },
      changeTab (index) {
        this.guideObj.currentIndex = index
      },
      close () {
				this.guideObj.isShow = false
				this.$emit('updateLoginTime')
			},
			open () {
				this.guideObj.currentIndex = 0
				this.guideObj.isShow = true
			}
    },
    components: {
    },
    mounted () {
    },
    beforeDestroy () {

    }
  }
</script>
<style lang="stylus">
.m7fade-enter-active, .m7fade-leave-active {
  transition: opacity 1s;
}
.m7fade-enter, .m7fade-leave-to {
  opacity: 0;
}
</style>
<style lang="stylus" scoped>
@import "../../../assets/common.styl"
.novice-guide
	.tag
		margin-right 20px
		cursor pointer
		&.tag-common
			border-color #fff
			background-color #fff
			color $cf-gray5
	.img-wrap
		padding 12px 50px 30px
		height 551px
		display block
		width 920px
		box-sizing border-box
</style>
